import QtQuick 2.9
import QtQuick.Controls 2.5
import PGModel 1.0
import PluginHandler 1.0

Rectangle {
    property int showIdx: 0
    property int btnWidth: 80

    id: out_rect


    ListView {
        id: view
        anchors.fill: parent
        anchors.leftMargin: 5

        orientation: ListView.Horizontal
        layoutDirection: Qt.LeftToRight
        snapMode: ListView.SnapOneItem
        boundsBehavior: Flickable.StopAtBounds

        removeDisplaced: Transition {
            NumberAnimation { properties: "x,y"; duration: 1000 }
        }
        model: PGModel
        delegate: delegatePages

    }

    Component {
        id: delegatePages
        PGRactangle {
            height: view.height
            width: txt.width + img.width + 20

            borderBottom: ListView.isCurrentItem ? 0 : 1
            borderLeft: 1
            borderTop: 1
            borderRight: 1


            Text {
                id: txt
                height: parent.height
                font.family: "Microsoft Yahei"
                font.pixelSize: 16
                text: qsTr(pgName)
                wrapMode: Text.WordWrap

                anchors.left: parent.left
                anchors.leftMargin: 10
                verticalAlignment: Text.AlignVCenter
            }

            Image {
                id: img
                source: "images/delete_black.png"
                width: index === 0 ? 0 : 16
                height: index === 0 ? 0 : 16
                fillMode: Image.PreserveAspectFit
                anchors.right: parent.right
                anchors.rightMargin: 5
                anchors.verticalCenter: parent.verticalCenter
                visible: false
                z: 2

                Rectangle {
                    anchors.fill: parent
                    color: "transparent"
                    border.color: "#f0f0f0"
                    border.width: 3
                    // 删除键
                    MouseArea {
                        anchors.fill: parent
                        enabled: true
                        hoverEnabled: true
                        opacity: 0.6

                        onEntered: {
                            console.log("inner MouseArea onEntered")
                            img.visible = true
                            img.source = "images/delete_red.png"
                        }

                        onExited: {
                            img.source = "images/delete_black.png"
                        }

                        onClicked: {
                            if (index === view.currentIndex) {
                                PluginHandler.changeHeader(index - 1)
                            }
                            PluginHandler.releasePage(index)
                            console.log("remove page " + txt.text)
                        }
                    }
                }


            }

            MouseArea {
                anchors.fill: parent
                enabled: true
                hoverEnabled: true

                onEntered: {
                    parent.opacity = 8
                    img.visible = true
                }

                onPressed: {
                    if (view.currentIndex !== index) {
                        PluginHandler.changeHeader(index)
                    }
                }

                onExited: {
                    parent.opacity = 1
                    img.visible = false
                }

            }

            Connections {
                target: PluginHandler
                /* @Brief   : 当页面切换时触发
                 * @Param   : idx 导航条索引
                 * @Return  : void
                 * @Author  : BinWatson
                 * @Version : v1.0
                 * @Date    : 2022-06-06 14:35:41
                 * @Details : 由头部连锁带动页面切换
                 */
                function onHeaderChanged(idx) {
                    if (view.currentIndex !== idx)
                    {
                        console.log("onHeaderChanged " + idx)
                        view.currentIndex = idx
                        PluginHandler.changePage(idx);
                    }
                }
            }

            Component.onCompleted:  {
                // 显示主页面
                PluginHandler.changeHeader(0);
            }
        }
    }
}


